
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        @keyframes change {
            0% {
                transform: scale(.5);
                opacity: 0;
            }
            50% {
                transform: scale(1);
                opacity: .5;
            }
            100% {
                transform: scale(1.5);
                opacity: 1;
            }
        }
        #flame {
			width: 100%;
			height: 100%;
		}

        .heart {
            animation: change 2s infinite alternate;
        }

        .heart::before {
            content: "";
            position: absolute;
            top: 0;
            left: 3px;
            width: 10px;
            height: 16px;
            border-radius: 5px 5px 0 0;
            background-color: #f00;
            transform: rotate(-45deg);
        }

        .heart::after {
            content: "";
            position: absolute;
            top: 0;
            left: 7.3px;
            width: 10px;
            height: 16px;
            border-radius: 5px 5px 0 0;
            background-color: #f00;
            transform: rotate(45deg);
        }
    </style>
</head>

<body>
    <div id="flame"></div>
    <!-- 和实现雪花飘落的效果一样，所以js代码也一样 -->
    <script>
        //雪花飘落的效果实现步骤：
        //1.使用setInterval定时器每800毫秒创建一个雪花；
        //2.把每一个雪花作为参数传进动态下落的方法中即可。

        //动态下落方法
        function Obj() { }//创建一个对象
        //创建这个对象里面的一个方法
        Obj.prototype.draw = function (o) {
            var speed = 0;//雪花每次下落的数值
            //设置雪花随机的开始x值的大小
            var startPosLeft = Math.ceil(Math.random() * document.documentElement.clientWidth);
            //设置透明度
            // o.style.opacity = (Math.ceil(Math.random() * 3) + 7) / 10;
            o.style.left = startPosLeft + "px";
            // o.style.color = "#fff";
            // o.style.fontSize = 12 + Math.ceil(Math.random() * 14) + "px";
            setInterval(function () {
                //雪花下落的top值小于屏幕可视区域高时
                if (speed < document.documentElement.clientHeight) {
                    o.style.top = speed + "px";
                    o.style.left = startPosLeft + Math.ceil(Math.random() * 8) + "px";
                    speed += 10;
                } else {
                    o.style.display = "none";
                }
            }, 400);

        }
        var flame = document.getElementById("flame");
        //使用setInterval定时器每800毫秒创建一个雪花
        setInterval(function () {
            //创建div
            var oDiv = document.createElement("div");
            //div的内容
            oDiv.className = "heart";
            //div的绝对定位
            oDiv.style.position = "absolute";
            //把创建好的div放进flame中
            flame.appendChild(oDiv);
            var obj = new Obj();//创建函数
            obj.draw(oDiv);//执行obj的draw方法
        }, 800);

    </script>
</body>

</html>